<!--开考列表 -》 考试详情 》考场详情 -->
<div class="layuimini-container layuimini-page-anim">
  <div class="layuimini-main">
    <blockquote class="site-text layui-elem-quote">
      <h2 class="u-m-b-10">淮南职业技术学院</h2>
      <h4 class="u-m-b-10">考试时间：2021-07-07</h4>
      <h4>具体时间：8:00-9:00</h4>
    </blockquote>
    <table class="layui-hide" id="detailsTable" lay-filter="currentTableFilter"></table>
  </div>
</div>
<!--列表按钮-->
<script type="text/html" id="detailsTableBar">
  <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" href="javascript:;"
     layuimini-content-href="/static/exam/page/exam/kaikao_teacher.html" data-title="监考人员详情" >监考人员详情</a>
  <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">修改</a>
  <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" href="javascript:;"
     layuimini-content-href="/static/exam/page/exam/kaikao_user_select.html" data-title="选择考生" >选择考生</a>
</script>
<!--添加按钮-->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-normal data-add-btn layui-btn-sm" lay-event="add">添加考场</button>
  </div>
</script>

<!--添加考场模板-->
<script type="text/html" id="add-temp">
  <div class="layui-form layuimini-form u-p-t-20 u-p-r-20">
    <div class="layui-form-item">
      <label class="layui-form-label required">考场编号</label>
      <div class="layui-input-block">
        <select name="city" lay-verify="">
          <option value="">请选择</option>
          <option value="010">北京</option>
          <option value="021">上海</option>
          <option value="0571">杭州</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label required">考场地址</label>
      <div class="layui-input-block">
        <select name="city" lay-verify="">
          <option value="">请选择</option>
          <option value="010">北京</option>
          <option value="021">上海</option>
          <option value="0571">杭州</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">保存</button>
        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">取消</button>
      </div>
    </div>
  </div>
</script>

<script>
  var tableData = [
    {
      'id': 10000,
      name: '张明明',
      sex: '女',
      idCard: '52222112',
      phone: '185939439434',
      type: '安管人员',
      phone: '185939439434',
      danwei: '安徽理工大学',
      area: '田家庵区'
    },
    {
      'id': 10000,
      name: '张明明',
      sex: '女',
      idCard: '52222112',
      phone: '185939439434',
      type: '安管人员',
      phone: '185939439434',
      danwei: '安徽理工大学',
      area: '田家庵区'
    },
    {
      'id': 10000,
      name: '张明明',
      sex: '女',
      idCard: '52222112',
      phone: '185939439434',
      type: '安管人员',
      phone: '185939439434',
      danwei: '安徽理工大学',
      area: '田家庵区'
    },
    {
      'id': 10000,
      name: '张明明',
      sex: '女',
      idCard: '52222112',
      phone: '185939439434',
      type: '安管人员',
      phone: '185939439434',
      danwei: '安徽理工大学',
      area: '田家庵区'
    },
    {
      'id': 10000,
      name: '张明明',
      sex: '女',
      idCard: '52222112',
      phone: '185939439434',
      type: '安管人员',
      phone: '185939439434',
      danwei: '安徽理工大学',
      area: '田家庵区'
    },
    {
      'id': 10000,
      name: '张明明',
      sex: '女',
      idCard: '52222112',
      phone: '185939439434',
      type: '安管人员',
      phone: '185939439434',
      danwei: '安徽理工大学',
      area: '田家庵区'
    },
    {
      'id': 10000,
      name: '张明明',
      sex: '女',
      idCard: '52222112',
      phone: '185939439434',
      type: '安管人员',
      phone: '185939439434',
      danwei: '安徽理工大学',
      area: '田家庵区'
    },
  ]
  layui.use(['form', 'table', 'miniPage', 'element', 'laydate'], function () {
    var $ = layui.jquery,
      form = layui.form,
      table = layui.table,
      laydate = layui.laydate

    table.render({
      elem: '#detailsTable',
      data: tableData,
      toolbar: '#toolbarDemo',
      defaultToolbar: ['filter', 'exports', 'print'],
      cols: [[
        { field: 'id', title: '序号', sort: true },
        { field: 'name', title: '考场编号' },
        { field: 'name', title: '考场地址' },
        { field: 'idCard', title: '考试人数' },
        { title: '操作', minWidth: 240, toolbar: '#detailsTableBar', align: 'center' }
      ]],
      page: true,
      skin: 'line'
    })

    // 添加考场
    table.on('toolbar(currentTableFilter)', function (obj) {
      if (obj.event === 'add') {
        var index = layer.open({
          title: '添加考场',
          type: 1,
          shade: 0.2,
          maxmin: true,
          shadeClose: true,
          area: ['500px', '400px'],
          content: $('#add-temp').html(),
          success: function () {
            form.render()
          }
        })
      }
    })

    // 编辑
    table.on('tool(currentTableFilter)', function (obj) {
      var data = obj.data
      if (obj.event === 'edit') {
        var index = layer.open({
          title: '编辑考场',
          type: 1,
          shade: 0.2,
          maxmin: true,
          shadeClose: true,
          area: ['500px', '400px'],
          content:  $('#add-temp').html(),
          success: function () {
            form.render()
          }
        })
        $(window).on('resize', function () {
          layer.full(index)
        })
        return false
      } else if (obj.event === 'delete') {
        layer.confirm('真的删除行么', function (index) {
          obj.del()
          layer.close(index)
        })
      }
    })

  })
</script>
